<script setup>
import { ref, watch, nextTick } from "vue";
const props = defineProps({
  formData: {
    type: Object,
    default: () => ({}),
  },
});

const quillRef = ref();

// 富文本回显
watch(
  () => props.formData.description,
  async (newVal) => {
    // console.log(newVal);
    if (props.formData.id) {
      await nextTick();
      quillRef.value.setHTML(newVal);
    }
  }
);

// 清空富文本
const clearQuill = () => {
  quillRef.value.setHTML("");
};

// 单独校验富文本
const editorRef = ref();
const validateQuill = async () => {
  try {
    await editorRef.value.validate();
  } catch (error) {
    console.log(error);
  }
};
// const editorBlur = async () => {
//   console.log(123);
// };

defineExpose({
  clearQuill,
  // editorBlur,
  validateQuill,
});
</script>

<template>
  <el-row :gutter="20">
    <el-col :span="12">
      <el-form-item label="备注" prop="remark">
        <el-input
          v-model="formData.remark"
          autosize
          :rows="3"
          type="textarea"
          placeholder="请输入"
        />
      </el-form-item>
    </el-col>
    <el-col :span="12">
      <el-form-item label="封面图片" label-width="150px" prop="img_url">
        <ImageUpload v-model="formData.img_url" :type="'ticket'"></ImageUpload>
      </el-form-item>
    </el-col>
  </el-row>
  <el-form-item
    label="内容"
    label-width="150px"
    prop="description"
    ref="editorRef"
  >
    <QuillEditor
      v-model:content="formData.description"
      contentType="html"
      ref="quillRef"
    ></QuillEditor>
    <!-- @blur="editorBlur" -->
  </el-form-item>
</template>

<style lang="scss" scoped>
:deep(.ql-toolbar) {
  width: 500px;
}
:deep(.ql-container) {
  height: 200px;
  width: 500px;
}
</style>
